<template>
  <div>
    <el-container>
      <el-header class="layout-header"><h1>强盛健身运营管理平台</h1></el-header>
      <el-container class="layout-body">
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#000000"
              text-color="#ff0000"
              active-text-color="#ff0000"
              unique-opened>
            <el-menu-item index="/sys-admin/index">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span>会员管理(汪熊伟)</span>
              </template>
              <el-menu-item index="2-1">
                <i class="el-icon-circle-plus"></i>
                <span slot="title">添加会员信息</span>
              </el-menu-item>
              <el-menu-item index="2-2">
                <i class="el-icon-s-operation"></i>
                <span slot="title">会员信息</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/brand/addNew">
                <i class="el-icon-circle-plus"></i>
                <span slot="title">会员充值</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/brand/list">
                <i class="el-icon-s-operation"></i>
                <span slot="title">教练安排</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/category/addNew">
                <i class="el-icon-circle-plus"></i>
                <span slot="title">器械安排</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>教练管理(王奥)</span>
              </template>
              <el-menu-item index="3-1">
                <i class="el-icon-circle-plus"></i>
                <span slot="title">添加教练</span>
              </el-menu-item>
              <el-menu-item index="3-2">
                <i class="el-icon-s-operation"></i>
                <span slot="title">教练信息</span>
              </el-menu-item>
              <el-menu-item index="3-3">
                <i class="el-icon-circle-plus"></i>
                <span slot="title">教练课程安排</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="4" >
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>课程管理(王威琦)</span>
              </template>
              <el-menu-item index="4-1">
                <i class="el-icon-menu"></i>
                <span slot="title">添加课程</span>
              </el-menu-item>
              <el-menu-item index="4-2">
                <i class="el-icon-menu"></i>
                <span slot="title">课程信息管理</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="5" >
              <template slot="title">
                <i class="el-icon-s-ticket"></i>
                <span>器械管理(徐俊朝)</span>
              </template>
              <el-menu-item index="5-1">
                <i class="el-icon-menu"></i>
                <span slot="title">添加器械</span>
              </el-menu-item>
              <el-menu-item index="5-2">
                <i class="el-icon-menu"></i>
                <span slot="title">器械信息</span>
              </el-menu-item>
              <el-menu-item index="5-3">
                <i class="el-icon-menu"></i>
                <span slot="title">器械使用状态</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="6" >
              <template slot="title">
                <i class="el-icon-platform-eleme"></i>
                <span>商品管理;(鲁章为)</span>
              </template>
              <el-menu-item index="/sys-admin/temp/product/add-new">
                <i class="el-icon-menu"></i>
                <span slot="title">添加商品</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/temp/product/list">
                <i class="el-icon-menu"></i>
                <span slot="title">商品信息管理</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="7" >
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>社区内容管理(马安程)</span>
              </template>
              <el-menu-item index="2-1">
                <i class="el-icon-menu"></i>
                <span slot="title">社区信息添加</span>
              </el-menu-item>
              <el-menu-item index="2-1">
                <i class="el-icon-menu"></i>
                <span slot="title">社区内容管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main class="layout-main">
          <!-- 根据路由，由其它视图组件来显示 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.layout-header {
  background: #000;
  color:#FF0000;
}

.layout-header h1 {
  line-height: 60px;
}

.layout-body {
  position: absolute;left: 0px ; right: 0px;top: 60px;bottom: 0px;
}

.layout-aside {
  background: #000000;
}

.layout-aside i{
  color: #ffffff !important;
}

.layout-main {


}
/*鼠标点击时,导航栏颜色变化*/
.el-menu-item.is-active{
  background-color: #000 !important;
}

</style>
<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
